/* 配置组件模板结构 */
<template>
    <div>
        <h2 class="title">学校名: {{name}}</h2>
        <h2 @click="showAddress">学校地址: {{address}}</h2>
    </div>
</template>

/* 配置组件数据、交互、事件等等 */
<script>
  //此处只是配置了组件的配置 并没有创建组件.
  export default {
    data(){
      return {
        name: '银河日语',
        address: '宏福科技园'
      }
    },
    methods: {
      showAddress(){
        //注意这里的this不再是vm,而是vc(VueComponent实例)
        console.log(this.address);
      }
    }
  }
</script>

/* 配置组件样式 */
<style>
  .title{
    background-color: orange;
  }
</style>
